<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <!--  <ul>
      <li class="active">11</li>
      <li>22</li>
      <li class="active box">33</li>
      <span>444</span>
      <span class="active box">555</span>
    </ul> -->
      <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
      </ul>
    </div>
    <button>添加li元素</button>
    <script>
      //一.事件委托:利用事件的传播机制,把一个元素的事件委托给另外一个元素执行
      //ul里有1000个li 那么需要给1000个li绑定点击事件

      // var lis = document.querySelectorAll("li");
      // lis.forEach(function (li) {
      //   li.onclick = function () {
      //     console.log("点击了");
      //   };
      // });

      //事件委托的写法
      //把li的事件委托给父级ul元素
      /*  var ulELe = document.querySelector("ul");
      ulELe.onclick = function (e) {
        //console.log("点击了");
        //通过一些特征 把需要的元素区分出来
        //console.log(this); //ul
        var target = e.target;
        // console.log(target);
        //通过标节点名称区分不同的标签
        /* if (target.nodeName === "LI") {
          console.log("点击了li元素");
        } */

      /*   if (target.classList.contains("active")) {
          console.log("点击了包含active类名的元素");
        }
      }; */

      //通过类名区分 不同的元素
      //判断类名里是否包含某个类名

      //二.引用场景
      //注意:可以委托给父级,也可以委托给父级的父级,一般不超过三层
      //1.元素过多,逻辑比较复杂
      //2.动态的添加子元素事件

      //普通写法实现li事件绑定
      //这样写后面添加的li不会被循环到 不会触发点击事件
      /* var lis = document.querySelectorAll("li");
      var ulELe = document.querySelector("ul");
      lis.forEach(function (li) {
        li.onclick = function () {
          console.log("点击了");
        };
      });
      document.querySelector("button").onclick = function () {
        var liEle = document.createElement("li");
        liEle.innerHTML = "新建的内容";
        ulELe.appendChild(liEle);
      }; */

      //
      //
      //事件委托实现li绑定
      var ulEle = document.querySelector("ul");
      //把li的事件委托给ul  和li就没有关系了
      ulEle.onclick = function (e) {
        var target = e.target;
        if (target.nodeName === "LI") {
          console.log("点击了");
        }
      };
      document.querySelector("button").onclick = function () {
        var liEle = document.createElement("li");
        liEle.innerHTML = "新建的内容";
        ulEle.appendChild(liEle);
      };
    </script>
  </body>
</html>
